import React, { Component, Fragment } from 'react';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { Form, Input, Upload, Select, Button } from 'antd';
import { connect } from 'dva';
import styles from './PasswordView.less';
import PropTypes from 'prop-types'

const FormItem = Form.Item;
const { Option } = Select;
import { post } from '@/utils/request';
import * as api from '@/constants/api';
import { toast, notify, alert, confirm } from '@/utils/utils';
import * as constant from '@/constants';

@connect(({user, loading})=>({
  submiting: loading.effects['user/updatePassword'],
}))
@Form.create()
class PasswordView extends Component{
  constructor(props){
    super(props);

    this.state={

    }
  }

  handleSubmit = e=>{
    e && e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((errors, values)=>{
      if(errors){
        return;
      }

      if(values.newPasswordConfirm !== values.newPassword) {
        toast('确认密码与新密码不一致', 'error');
        return;
      }

      dispatch({
        type: 'user/updatePassword',
        payload: {...values},
      }).then(()=>{
        toast('更新成功, 请重新登录');
        dispatch({
          type: 'login/logout'
        })
      })
    });
  }

  render(){
    const {
      form: { getFieldDecorator },
      submiting,
    } = this.props;

    return (
      <div className={styles.passwordView}>
        <Form layout='vertical' onSubmit={this.handleSubmit}>
          <FormItem label={'旧密码'}>
            {getFieldDecorator('oldPassword', {
              rules: [{required: true, message: '旧密码不能为空'}]
            })(<Input type={'password'} />)}
          </FormItem>
          <FormItem label={'新密码'}>
            {getFieldDecorator('newPassword', {
              rules: [{required: true, message: '新密码不能为空'}]
            })(<Input type={'password'} />)}
          </FormItem>
          <FormItem label={'确认密码'}>
            {getFieldDecorator('newPasswordConfirm', {
              rules: [{required: true, message: '确认密码不能为空'}]
            })(<Input type={'password'} />)}
          </FormItem>
          <Button loading={submiting} type='primary' onClick={this.handleSubmit}>
            更新密码
          </Button>
        </Form>
      </div>
    )
  }
}

export default PasswordView;
